import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { Form, Input, Button, Checkbox, message, } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

import './loginform.less'

import { Md5Psd, setLocalStorage } from '../../utils/utils'
import { PostApi } from '../../api/request'

message.config({
    top: 100,
});
class LoginForm extends Component {
    onFinish = async values => {
        try {
            const key = 'updatable';
            message.destroy();
            message.loading({ content: '正在请求服务器...', key });
            values.password = Md5Psd(values.password)
            let res = await PostApi('/login', values)
            if (res.data.code === 200) {
                setLocalStorage('token', res.data.token)
                setLocalStorage('userInfo', JSON.stringify(res.data.data))
                message.success({
                    content: res.data.msg, key, duration: 1, onClose: () => {
                        this.props.history.push('./disk')
                    }
                });
            } else if (res.data.code === 205) {
                message.warning({ content: res.data.msg, key, duration: 0 });
            } else {
                message.error({ content: res.data.msg, key, duration: 0 });
            }
        } catch (error) {
            message.destroy();
            if (error.indexOf("Network Error") !== -1) {
                message.error({ content: '后台服务器故障，请稍后重试！', duration: 0 });
            }
        }
    };
    validatorPWD = (rule, value) => {
        if (!value) {
            return Promise.reject('密码不能为空');
        } else if (value.length > 16) {
            return Promise.reject('密码不能大于16位');
        } else if (!/^[a-z0-9A-Z_]+$/.test(value)) {
            return Promise.reject('只支持英文数字和下划线');
        }
        return Promise.resolve();
    }
    render() {
        return (
            <Form name="normal_login" className="login-form" initialValues={{ remember: true }} onFinish={this.onFinish}>
                <Form.Item name="email" validateFirst={true}
                    rules={[{ required: true, whitespace: true, message: '请输入账号!' },
                    { type: 'email', message: '邮箱格式错误!' },
                    { max: 35, message: '邮箱不超过35字!' }
                    ]}>
                    <Input size="large" allowClear prefix={<UserOutlined className="site-form-item-icon"
                        style={{ color: 'rgba(0,0,0,0.2)' }} />} placeholder="邮箱账号" />
                </Form.Item>
                <Form.Item name="password"
                    rules={[{
                        validator: this.validatorPWD
                    }]} >
                    <Input.Password size="large" allowClear visibilityToggle prefix={<LockOutlined className="site-form-item-icon" style={{ color: 'rgba(0,0,0,0.2)' }} />} placeholder="密码" />
                </Form.Item>
                <div className='warp'>
                    <Form.Item name="remember" valuePropName="" noStyle>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>
                    <a className="login-form-forgot" href="/#">忘记密码？</a>
                </div>
                <Form.Item>
                    <Button size="large" type="primary" htmlType="submit" className="login-form-button">登 录</Button>
                </Form.Item>
            </Form>
        )
    }
}



export default withRouter(LoginForm)